<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS-狗尾巴草</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .container {
      position: relative;
      width: 100%;
      max-width: 414px;
      height: 100%;
      margin: 0 auto;
      transform-style: preserve-3d;
      perspective: 600px;
      perspective-origin: top center;
      overflow: hidden;
    }

    .box {
      position: relative;
      width: 0;
      height: 0;
    }

    .grass {
      position: absolute;
      width: 0;
      height: 0;
    }

    .grass::before {
      position: absolute;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      width: 60px;
      height: 100px;
      border-radius: 70% 0 0 0/100% 0 0 0;
      border: none;
      border-left: solid 8px #568769;
      content: '';
    }

    .grass::after {
      position: absolute;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      width: 60px;
      height: 100px;
      border-radius: 70% 0 0 0/100% 0 0 0;
      border-left: solid 4px #386f52;
      content: '';
    }

    .header {
      position: absolute;
      width: 0;
      height: 0;
    }

    .header::before {
      position: absolute;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      width: 100px;
      height: 240px;
      border-radius: 70% 0 0 0/100% 0 0 0;
      border: none;
      border-left: solid 2px #568769;
      content: '';
    }

    .header::after {
      position: absolute;
      left: 28px;
      bottom: 190px;
      box-sizing: border-box;
      width: 80px;
      height: 60px;
      border-radius: 70% 0 0 0/100% 0 0 0;
      border: none;
      border-left: solid 6px #568769;
      content: '';
      transform-origin: bottom center;
      transform: rotate(18deg);
      filter: blur(1px) drop-shadow(0 0 2px rgba(255, 255, 100, .6));
    }

    .tips {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 20px;
      color: #fff;
    }
  </style>
</head>

<body bgcolor="#000000">
  <div class="container">
    <div id="box" class="box">
    </div>
  </div>
  <div class="tips">
    点击屏幕刷新
  </div>
</body>
<script>
  var box = document.getElementById('box')
  function createGrass(left, top, len) {
    var fragment = document.createDocumentFragment()
    var div = createDiv('header', left, top)
    div.style.transform = 'scaleX(' + ([1, -1][~~(Math.random() * 2)]) + ') rotate(' + ~~(-15 + Math.random() * 40) + 'deg)'
    fragment.appendChild(div)

    for (var i = 0; i < len; i++) {
      div = createDiv('grass', left, top)
      div.style.opacity = Math.min(1, 0.5 + Math.random())
      div.style.transform = 'scaleY(' + (0.6 + Math.random() * 1.3) + ') scaleX(' + ([1, -1][~~(Math.random() * 2)]) + ') rotate(' + ~~(-15 + Math.random() * 60) + 'deg)'
      fragment.appendChild(div)
    }
    box.appendChild(fragment)
  }
  function createDiv(cName, left, top) {
    var div = document.createElement('div')
    div.className = cName
    div.style.top = top
    div.style.left = left
    return div
  }
  function draw() {
    box.innerHTML = ''
    var width = window.innerWidth
    var center = ~~(width / 2)
    createGrass(center + 50 + 'px', '400px', 16)
    createGrass(center - 40 + 'px', '405px', 15)
    createGrass(center + 'px', '420px', 18)
  }
  window.onload = draw
  document.onclick = draw
</script>

</html>